import { store } from 'quasar/wrappers';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import { localStorage } from 'src/adapter/localstorage';

// import example from './module-example';
// import { ExampleStateInterface } from './module-example/state';

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation
 */

import ArticleStateModule from './article';
import CommentStateModule from './comment';
import VisitorStateModule from './visitor';
import GlobalStateModule from './global';
import HeaderCoverStateModule from './headerCover';
import LoginStateModule from './login';
export interface StateInterface {
  // Define your own store structure, using submodules if needed
  // example: ExampleStateInterface;
  // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
  example: unknown;
}

export enum Modules {
  Announcement = 'announcement',
  Category = 'category',
  Tag = 'tag',
  Article = 'article',
  Comment = 'comment',
  Archive = 'archive',
  Option = 'option',
  Wallpaper = 'wallpaper',
  Vlog = 'vlog',
  Visitor = 'visitor',
  Global = 'global',
  HeaderCover = 'headerCover',
  Login = 'login'
}

const storePlugin = createPersistedState({
  storage: localStorage,
  fetchBeforeUse: true,
  reducer: (state: any) => {
    return {
      visitor: state.visitor
    };
  }
});

export default store(function({ Vue }) {
  Vue.use(Vuex);

  const Store = new Vuex.Store<StateInterface>({
    modules: {
      // example
      [Modules.Article]: ArticleStateModule,
      [Modules.Comment]: CommentStateModule,
      [Modules.Visitor]: VisitorStateModule,
      [Modules.Global]: GlobalStateModule,
      [Modules.HeaderCover]: HeaderCoverStateModule,
      [Modules.Login]: LoginStateModule
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: !!process.env.DEBUGGING
    // plugins: [
    //   createPersistedState({
    //     storage: localStorage,
    //     reducer: (state: any) => {
    //       return {
    //         visitor: state.visitor
    //       };
    //     }
    //   })
    // ]

    // plugins: [storePlugin]
  });

  return Store;
});
